<template>
   <h1>姓名：{{name}}</h1>
   <h1>年龄：{{age}}</h1>
   <h1>公司：{{company}}</h1>
   <h1>产品：{{obj.taobao}}</h1>
   <h1 v-for="(itme,index) in arr" :key="index">{{ itme.xiami }}</h1>
   <hr>
   <button @click="btn">点击更新视图层</button>
</template>
<script>
import {ref} from 'vue'//组合式API
export default({
    setup(){
        const name = ref('马云')
        const age = ref(50)
        const company = '阿里巴巴'
        //对象类型
        const obj = ref({taobao:'淘宝',tamll:'天猫'})
        //数组类型
        const arr = ref([{xiami:'虾米音乐'}])

        function btn(){
            name.value = '马化腾'
            age.value = 80
            obj.value.taobao = '淘宝002'
            arr.value[0].xiami = '虾米音乐002'
        }
        return{
            name,age,company,obj,btn,arr
        }
    }
})
</script>
<style>
</style>